<template>
<div class="front-main-content">
  <Card class="content-main station-main">
    <div class="card container-list">
      <div class="title-div">
        <div class="pic1" style="display:inline-block;">
          <img src="http://123.sse-china.com:8880/Images/topl.png" />
        </div>
        <div
          class="user"
          style="background: url(http://123.sse-china.com:8880/images/topm.png) repeat-x;"
        >
          <p>{{ $store.state.user.userName }}</p>
        </div>
        <div class="pic2" style="display:inline-block;">
          <img src="http://123.sse-china.com:8880/Images/topr2.png" />
        </div>
        <div class="charge-scale">
          <Icon :size="16" type="ios-home" />{{$t('MnVTPYQedgvu58HNvUBZk')}}：<span class="ind"
            >{{ stationScale }} kW</span
          >
        </div>
        <div class="update-time">
          <Icon :size="16" type="ios-time" />{{$t('jrkZ2Urg4M1yD_4FI3wuo')}}：<span class="ind">{{
            dateUpdateTime
          }}</span>
        </div>
      </div>
      <div class="card-div">
        <div class="card-item" v-for="item in cards" :key="item.name">
          <span class="logo" :class="item.cls"></span>
          <div class="detail">
            <span class="top">{{ item.title }}</span>
            <span class="bottom"> {{ item.value }} {{ item.unit }} </span>
          </div>
        </div>
      </div>
      <div class="chart-container">
        <div class="chart-title">
          <span class="title">
            <Icon :size="26" type="ios-podium" />{{$t('jUV8GR6GrjMTKFLSZgoko')}}
          </span>
          <span class="btns">
            <RadioGroup v-model="indicator">
              <Radio label="day">{{$t('2As2qMqRklYKm1bLZzPQN')}}</Radio>
              <Radio label="month">{{$t('59JUIi4-tCPrlMHVhz9Wh')}}</Radio>
              <Radio label="year">{{$t('6QTMmyA1A8r1VR0rM77-x')}}</Radio>
            </RadioGroup>
            <DatePicker
              :type="dateType"
              :format="timeFormat"
              v-model="time"
            ></DatePicker>
          </span>
        </div>
        <div class="chart-area">
          <div
            class="chart-wrapper"
            id="chart"
            style="width:100%; height: 300px;"
          ></div>
        </div>
        <div class="table-area">
          <Table :loading="loading" :columns="columns" :data="data"></Table>
        </div>
      </div>
    </div>
  </Card>
</div>
</template>

<script>
import moment from 'moment'
import echarts from 'echarts'

export default {
  name: 'stationOverview',
  data () {
    return {
      stationScale: 0,
      dateUpdateTime: moment().format('yyyy/MM/DD HH:mm:ss'),
      loading: false,
      time: moment().format('yyyy/MM/DD'),
      timeFormat: 'yyyy-MM-dd',
      indicator: 'day',
      dateType: 'date',
      columns: [
        {
          title: this.$t('dUE9V6jUHBdS6m9avfiqp'),
          key: 'pileName'
        },
        {
          title: this.$t('_U-ZtVG4JB3EY66WR98OJ'),
          key: 'pileType'
        },
        {
          title: this.$t('Hj_cOkH4-CUmh2cXEEaYZ'),
          key: 'gunNumber'
        },
        {
          title: this.$t('MVMkv_batpRoCwl-kdm4h'),
          key: 'pileStatus'
        },
        {
          title: this.$t('yA34-lUnahw6SVhVDODyA'),
          key: 'gunChargeProgress'
        },
        {
          title: this.$t('ilBjnTHvH9FZJ10Ujr05w'),
          key: 'gunChargeCurrent'
        },
        {
          title: this.$t('Mjtbk_f7kxbjNYgJwyX2q'),
          key: 'currentPower'
        },
        {
          title: this.$t('_Rpg0m8CqYK1YlL2sDXYP'),
          key: 'pileTolalNumer'
        },
        {
          title: this.$t('xNJjaNDTMwLjvRvzBHsfP'),
          key: 'release'
        },
        {
          title: this.$t('jrkZ2Urg4M1yD_4FI3wuo'),
          key: 'updateTime'
        }
      ],
      data: [],
      cards: [
        {
          name: 'chargeNum',
          cls: 'logo-charge',
          title: this.$t('sgO8XTrpDs0hVu2JOZPmp'),
          value: 0.0,
          unit: this.$t('7HETTJlktsKtCHcOB5fHN')
        },
        {
          name: 'todayIncome',
          cls: 'logo-charge',
          title: this.$t('ma-Wvw46NoePPzbCGTIc3'),
          value: 0.0,
          unit: this.$t('rEwoS7D6EkR6EPGHSq6MU')
        },
        {
          name: 'appChargeNum ',
          cls: 'logo-num',
          title: this.$t('6LCOzdrU5sddtGNODX6zu'),
          value: 0.0,
          unit: this.$t('7HETTJlktsKtCHcOB5fHN')
        },
        {
          name: 'todayChargeNum',
          cls: 'logo-count',
          title: this.$t('DL2DNclHzKS40EZ3cpZlV'),
          value: 0,
          unit: ''
        },
        {
          name: 'appChargeNum',
          cls: 'logo-count2',
          title: this.$t('9kv7jny_0scMyu50Pi6XD'),
          value: 0,
          unit: ''
        },
        {
          name: 'chargePileNum',
          cls: 'logo-count3',
          title: this.$t('MV-P1vHjPXG7_m9z2N7Zk'),
          value: 0,
          unit: ''
        },
        {
          name: 'charging',
          cls: 'logo-charging',
          title: this.$t('LdhLANFGmrEcJf8T58SHZ'),
          value: 0,
          unit: ''
        },
        {
          name: 'badPileNum',
          cls: 'logo-count4',
          title: this.$t('L2UZuJOPtG2otWb2Y2aQF'),
          value: 0,
          unit: ''
        },
        {
          name: 'outPower',
          cls: 'logo-num',
          title: this.$t('fANrdlSjcKKCJpUTfEi50'),
          value: 0,
          unit: 'kW'
        },
        {
          name: 'todayGetIncome',
          cls: 'logo-num',
          title: this.$t('L-RWb0E4sRlRnQPvJ_Uo7'),
          value: 0.0,
          unit: this.$t('rEwoS7D6EkR6EPGHSq6MU')
        }
      ]
    }
  },
  watch: {
    indicator () {
      this.makeTimeFormat()
      this.renderChart()
    }
  },
  mounted () {
    this.makeTimeFormat()
    this.renderChart()
  },
  methods: {
    makeTimeFormat () {
      if (this.indicator === 'day') {
        this.timeFormat = 'yyyy-MM-dd'
        this.dateType = 'date'
        this.time = moment().format('yyyy-MM-DD')
      } else if (this.indicator === 'month') {
        this.timeFormat = 'yyyy-MM'
        this.dateType = 'month'
        this.time = moment().format('yyyy-MM')
      } else if (this.indicator === 'year') {
        this.timeFormat = 'yyyy'
        this.dateType = 'year'
        this.time = moment().format('yyyy')
      }
    },
    renderChart () {
      this.$nextTick(() => {
        const params = this.getChartParams(this.indicator)
        if (!this._myChart) {
          this._myChart = echarts.init(document.getElementById('chart'))
        }
        this._myChart.setOption(params, true)
      })
    },
    getChartParams () {
      const param = {
        color: ['#7cb5ec'],
        xAxis: {
          type: 'category',
          data: ['2021.01']
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          show: true,
          top: 'bottom'
        },
        series: [
          {
            name: this.$t('DyFHLriFxsvqhbeY8xUPW'),
            data: [],
            type: 'bar'
          }
        ],
        animationDuration: 2000
      }
      if (this.indicator === 'day') {
        _.assign(param, {
          title: {
            text: this.$t('17iKd_WV9gEGvHctJPdbu'),
            left: 'center'
          },
          yAxis: {
            type: 'value',
            name: this.$t('DyFHLriFxsvqhbeY8xUPW'),
            nameLocation: 'center',
            nameGap: 60,
            axisLabel: {
              formatter (value, index) {
                if (value > 1000000) {
                  return value / 1000000 + 'M'
                } else if (value > 1000) {
                  return value / 1000 + 'K'
                } else if (value > 0) {
                  return value
                }
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitNumber: 4
          },
          tooltip: {
            show: true,
            formatter: ({ name, marker, data }) => {
              return name + '<br>' + marker + this.$t('DyFHLriFxsvqhbeY8xUPW') + ':' + data + this.$t('rEwoS7D6EkR6EPGHSq6MU')
            }
          },
          series: [
            {
              data: [744770.37],
              type: 'bar',
              name: this.$t('DyFHLriFxsvqhbeY8xUPW'),
              barWidth: 35
            }
          ]
        })
      } else if (this.indicator === 'month') {
        _.assign(param, {
          title: {
            text: this.$t('LGJ3u5V0ynq-FGyfu5co9'),
            left: 'center'
          },
          yAxis: {
            type: 'value',
            name: this.$t('sgO8XTrpDs0hVu2JOZPmp'),
            nameLocation: 'center',
            nameGap: 60,
            axisLabel: {
              formatter (value, index) {
                if (value > 1000000) {
                  return value / 1000000 + 'M'
                } else if (value > 1000) {
                  return value / 1000 + 'K'
                } else if (value > 0) {
                  return value
                }
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitNumber: 4
          },
          tooltip: {
            show: true,
            formatter: ({ name, marker, data }) => {
              return name + '<br>' + marker + this.$t('sgO8XTrpDs0hVu2JOZPmp') + ': ' + data + this.$t('7HETTJlktsKtCHcOB5fHN')
            }
          },
          series: [
            {
              data: [2044149.52],
              type: 'bar',
              name: this.$t('sgO8XTrpDs0hVu2JOZPmp'),
              barWidth: 35
            }
          ]
        })
      } else if (this.indicator === 'year') {
        _.assign(param, {
          title: {
            text: this.$t('qOLB_bj-4ZmZ-F3JbKWWI'),
            left: 'center'
          },
          yAxis: {
            type: 'value',
            name: this.$t('4tDcsdHzHdbuQMK8JiNxq'),
            nameLocation: 'center',
            nameGap: 60,
            axisLabel: {
              formatter (value, index) {
                if (value > 1000000) {
                  return value / 1000000 + 'M'
                } else if (value > 1000) {
                  return value / 1000 + 'K'
                } else if (value > 0) {
                  return value
                }
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitNumber: 4
          },
          tooltip: {
            show: true,
            formatter: ({ name, marker, data }) => {
              return name + '<br>' + marker + this.$t('4tDcsdHzHdbuQMK8JiNxq') + '：' + data + this.$t('gvvbCXhgboLNspUiEBq7s')
            }
          },
          series: [
            {
              data: [56803],
              type: 'bar',
              name: this.$t('4tDcsdHzHdbuQMK8JiNxq'),
              barWidth: 35
            }
          ]
        })
      }
      return param
    }
  }
}
</script>
